let username = localStorage.getItem("username");
let uid = localStorage.getItem("uid");
//1-把用户名显示到页面上，并且获取购物车列表的商品数量
if (username) {
  $(".denglu").html(username);
  $(".zhuce").css("display", "none");
  axios.get(cartListAPI, { params: { id: uid } }).then(function (res) {
    $(".txt-gouwuche").html(`购物车(${res.data.data.length})`);
  });
}
//2-选商品颜色边框颜色改变
$(".box-nav li").click(function () {
  $(".box-nav li").css("border", " #e0e0e0 1px solid");
  $(this).css("border", " #ff6700 1px solid");
});
//3-获取url上存的商品pid
let searachStr = location.search;
let searchParams = new URLSearchParams(searachStr);
let pid = searchParams.get("id");
console.log(pid);
if (!pid) {
  alert("商品不存在");
  // $('html').html('')
} else {
  axios.get(detailApi, { params: { id: pid } }).then((res) => {
    let pObj = res.data.data;
    console.log(pObj);
    //放大镜
    let imgHtml = `
                <div class="left-small-img">
                <img src="${pObj.pimg}" class="small-img">
                <div class="mask"></div>
                </div>
                <div class="left-big-img">
                    <img src="${pObj.pimg}" class="big-img">
                </div>`;
    $(".box-left").html(imgHtml);
    //商品信息
    let dataHtml = `
                <h2 class="box-pname">${pObj.pname}</h2>
                <p class="box-pdesc">${pObj.pdesc}</p>
                <span>小米自营</span>
                <p class="box-pprice">${parseInt(pObj.pprice)}元</p>`;
    $(".box-data").html(dataHtml);
    zjFu();
    //3-1给加号添加点击事件
    $(".jiahao").click(function () {
      let value = $(".txtipt").val();
      if (value <= 9998) {
        ++value;
        $(".txtipt").val(value);
      }else{
        $(".txtipt").val(9999);
      }
      zjFu();
    });

    //3-2给减号添加点击事件
    $(".jianhao").click(function () {
      let value = $(".txtipt").val();
      if (value == 1) {
        return;
      }
      --value;
      $(".txtipt").val(value);
      zjFu();
    });

    //3-3给输入框添加事件
    $(".txtipt").on("input", function () {
      setTimeout(() => {
        if ($(".txtipt").val() <= 0) {
          $(".txtipt").val(1);      
        } else if ($(".txtipt").val() == "-") {
          $(".txtipt").val(1);
        }else if ($(".txtipt").val() >= 9999) {
          $(".txtipt").val(9999);
        }
      }, 500);
      zjFu();
    });

    //3-4给加入购物车添加点击事件
    $(".add").click(async function () {
      //   接口参数：
      //   uid  用户id
      let uid = localStorage.getItem("uid");

      //   pid  商品id
      //   pnum  要添加的商品数量
      let pnum = $(".txtipt").val();
      let params = { pid, uid, pnum };
      console.log(params);
      let { data } = await axios.get(addProductAPI, { params });
      console.log(data);
      alert("加入购物车成功");
      axios.get(cartListAPI, { params: { id: uid } }).then(function (res) {
        $(".txt-gouwuche").html(`购物车(${res.data.data.length})`);
      });
    });

    function zjFu(){
      let zj = "null";
      if ($(".txtipt").val()!=1) {
        zj = parseInt(pObj.pprice)*$(".txtipt").val()
      }else if ($(".txtipt").val() == 1) {
        zj = parseInt(pObj.pprice)*$(".txtipt").val()
      }
      // let zj = parseInt(pObj.pprice)*$(".txtipt").val()
    $("#spzj").html(`${zj}元`)
    }
    fadajing();//调用放大镜函数
  });
}
//4-放大镜
function fadajing() {
  let fdj = document.querySelector(".box-left");
  let mask = document.querySelector(".mask");
  let big = document.querySelector(".left-big-img");
  let small = document.querySelector(".left-small-img");
  let bigImg = document.querySelector(".big-img");
  fdj.onmouseenter = function () {
    mask.style.display = "block";
    big.style.display = "block";

    let bigImgWidth = (big.offsetWidth * small.offsetWidth) / mask.offsetWidth;
    bigImg.style.width = bigImgWidth + "px";

    // mask 跟鼠标
    small.onmousemove = function (e) {
      // 鼠标在fdj内的坐标
      let offsetX = e.pageX - fdj.offsetLeft;
      let offsetY = e.pageY - fdj.offsetTop;

      // mask在fgj内的坐标
      let maskX = offsetX - mask.offsetWidth / 2;
      let maskY = offsetY - mask.offsetHeight / 2;
      if (maskX <= 0) {
        maskX = 0;
      }
      if (maskY <= 0) {
        maskY = 0;
      }
      if (maskX >= fdj.offsetWidth - mask.offsetWidth) {
        maskX = fdj.offsetWidth - mask.offsetWidth;
      }
      if (maskY >= fdj.offsetWidth - mask.offsetWidth) {
        maskY = fdj.offsetWidth - mask.offsetWidth;
      }
      mask.style.left = maskX + "px";
      mask.style.top = maskY + "px";

      let bigImgX = (-maskX * bigImgWidth) / small.offsetWidth;
      let bigImgY = (-maskY * bigImgWidth) / small.offsetWidth;

      bigImg.style.left = bigImgX + "px";
      bigImg.style.top = bigImgY + "px";
    };
    fdj.onmouseleave = function () {
      mask.style.display = "none";
      big.style.display = "none";
    };
  };
}
